<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <el-row>
            <el-input clearable class="filter-item" style="width: 200px;marginRight:12px" placeholder="输入预算编码或预算科目名" />
            <el-select placeholder="请选择区域" style="marginRight:12px;"></el-select>
            <el-select placeholder="请选择年份" style="marginRight:12px;"></el-select>
            <el-button class="filter-item" type="primary" icon="el-icon-search" style="marginRight:12px;" @click="">搜索</el-button>
            <el-button class="filter-item" type="text" @click="">新增</el-button>
        </el-row>    

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row style="marginTop:12px;">
            
            <el-table-column align="center" width="100px" label="序号" prop="id" sortable />
    
            <el-table-column align="center" label="内容" prop="showContent" />

            <el-table-column align="center" label="別名" prop="remarks" />

            <el-table-column align="center" label="值" prop="dbValue" />

            <el-table-column align="center" label="创建者" prop="creator" />

            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    <span>{{moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
                </template>
            </el-table-column>
            <!-- 

            <el-table-column align="center" label="公建服务户数" prop="public_num" />

            <el-table-column align="center" label="其他" prop="other_num" />

            <el-table-column align="center" label="住宅面积（万㎡）" prop="house_area" />

            <el-table-column align="center" label="商铺面积（万㎡）" prop="shop_area" />

            <el-table-column align="center" label="商业面积（万㎡）" prop="business_area" />

            <el-table-column align="center" label="写字楼面积（万㎡）" prop="office_area" />

            <el-table-column align="center" label="公建服务面积（万㎡）" prop="public_area" />

            <el-table-column align="center" label="其他（万㎡）" prop="other_area" />

            <el-table-column align="center" label="地面车位个数" prop="flow_car_num" />

            <el-table-column align="center" label="地下车位个数（地库全部车位）" prop="down_car_num" /> 
            
            -->
            <el-table-column align="center" label="操作2" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="showDelAlert=true">删除</el-button>
                </template>
            </el-table-column>

        </el-table>


        <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />





        <!-- 删除对话框 -->
        <el-dialog title="确认删除" :visible.sync="showDelAlert" width="30%" :before-close="handleClose">
            <span>确认删除该条记录？</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="default" @click="showDelAlert = false">取消</el-button>
                <el-button type="danger" @click="showDelAlert = false">删除</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>

import { fetchDictlist } from "@/api/dictionary";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import moment from "moment";
export default {
    name: "User",
    components: { Pagination },
    data() {
        return {
            pageNum: 1,
            pageSize: 30,
            list: [
                {"id": 2, "dictionaryType": "subjectsType", "showContent": "成本类", "dbValue": "cb", "remarks": "科目类型", "isDelete": 0, "creator": null, "createTime": "2021-08-17T07:28:00.000+00:00", "updateTime": "2021-08-17T07:28:25.000+00:00", "updator": null},
            ],
            showDelAlert: false,

            total: 0,
            listLoading: false,
            currentProject: {},
            moment:moment,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            let self = this;
            this.listLoading = true;
            fetchDictlist({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                })
                .then((response) => {
                    self.list = response;
                    self.total = self.list.length;
                    self.listLoading = false;
                })
                .catch((e) => {
                    debugger
                    self.list = [];
                    self.total = 0;
                    self.listLoading = false;
                });
        },

        handleClose() {
            this.showDelAlert = false;
        }
    },
};
</script>
